<template>
    <div id="map"></div>
</template>
  <script setup>
  import { onMounted } from "vue";
  import { app } from "@/main";
  import { Vmap, Rmap, MarkLayer,docLayer } from "./Hooks/map.js";
  
  
  onMounted(() => {
    const map = new ol.Map({
      target: "map",
      /* data */
      layers: [Rmap, Vmap, docLayer,MarkLayer],
      view: new ol.View({
        /* 设置中心点 */
        center: [114.4, 30.5],
        /* 设置放大级别 */
        zoom: 13,
        /* 设置坐标的参考系 */
        projection: "EPSG:4326",
      }),
      controls: [], //取消默认控件
      interactions: new ol.interaction.defaults({
        doubleClickZoom: false, //取消双击放大
      }),
    });
    app.config.globalProperties.$map = map;
  
  });
  
  </script>
  <style scoped>
  #map {
    width: 100vw;
    height: 100vh;
  }
  
  </style>
  